<template>
	<view class="bruce" id="conent">
		<ul class="bubble-bgwall">
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
		</ul>
		<view class="toptitle" @click="home">
			智能农业监控系统
		</view>
		<view class="showcontent">
			<view class="introduction">
				<scroll-view id="scrollview" scroll-y>
					<view class="deviceinfo">
						<view v-for="(item,index) in details" :key="item.id">
							<view class="deviceid">
								<span>设备信息</span>
							</view>
							<view class="devicename">
								<span>设备名称：</span>{{item.devicename}}
							</view>
							<view class="deviceremarks">
								<span>备注信息：</span>{{item.deviceremarks}}
							</view>
						</view>
					</view>
					<view class="charts-box1">
						<qiun-data-charts type="gauge" :opts="optse" :chartData="chartDatas" />
					</view>
					<view class="charts-box2">
						<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" />
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="andshowcontent">
			<my-component :title="'统计分析'"></my-component>
			<view class="andintroduction">
				<scroll-view id="andscrollview" scroll-y>
					<view class="deviceinfo">
						<view v-for="(item,index) in details" :key="item.id">
							<view class="deviceid">
								<span>设备信息</span>
							</view>
							<view class="devicename">
								<span>设备名称：</span>{{item.devicename}}
							</view>
							<view class="deviceremarks">
								<span>备注信息：</span>{{item.deviceremarks}}
							</view>
						</view>
					</view>
					<view class="charts-box1">
						<qiun-data-charts type="gauge" :opts="optse" :chartData="chartDatas" />
					</view>
					<view class="charts-box2">
						<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" />
					</view>

				</scroll-view>
			</view>

			<Bottom-component></Bottom-component>
		</view>
		<view class="righttop">
			<span @click="mypage">欢迎：{{userid}}</span>
		</view>
		<view class="winfroted-glass">
			<ul class="nav1">
				<li class="title1" @click="home">系统简介</li>
				<li class="title1" id="nav2">进入系统
					<ul id="nav3">
						<li class="title2" @click="Deviceinformation">设备信息</li>
						<li class="title2" @click="Realtime">设备详情</li>
						<li class="title2" @click="statisticanalysis">统计分析</li>
						<li class="title2" @click="prediction">实时数据</li>
						<li class="title2" @click="historydata">历史数据</li>
					</ul>
				</li>
				<li class="title1" @click="relatedTechnologies">相关技术</li>
				<li class="title1" @click="InsiteCommunity">进入社区</li>
				<li class="title1" @click="teamSpirit">团队风采</li>
				<li class="title1" @click="aboutUs">关于我们</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import MyComponent from '../my-component/my-component.vue';
	import {
		VUE_APP_BASE_URL
	} from 'utils/request.js';
	import {
		myrequest
	} from '../../utils/request';
	import {
		formatDate,
		formatDateHours,
		formatDategetDate
	} from "../../utils/time.js";
	export default {
		components: {
			MyComponent
		},
		data() {
			return {
				cssid: '',
				userid: 'itheima0001',
				details: [{
					userid: 'itheima',
					deviceid: 'K-XXXXXX',
					deviceidsecretkey: '**********************',
					devicename: 'device_name',
					deviceremarks: 'KEY-XXXXXXXXX',
					createtime: '公元000年'
				}],
				devicedatalist: [],
				olddevicedatalistDate: [],
				devicedatalistDate: [],
				oldDatelist: [],
				newTime: {
					newTime0: [],
					newTime1: [],
					newTime2: [],
					newTime3: [],
					newTime4: [],
					newTime5: []
				},
				newWater: [],
				newHumidity: [],
				newIlluminationlist: [],
				newSoil_moisturelist: [],
				chartDatas: {},
				currentDate: '',
				end: ["前5h", "前4h", "前3h", "前2h", "前1h", "当前"],
				//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				optse: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "66",
						fontSize: 25,
						color: "#2fc25b",
						offsetY: 0
					},
					subtitle: {
						name: "健康系数",
						fontSize: 15,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						title: "单位：小时"
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "数值"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "数值",
								textAlign: "left"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "数值",
								textAlign: "left"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				}
			}
		},

		onLoad(e) {
			this.cssid = e.cssid;
			// 获取当前的时间
			const currentTime = new Date().getHours();
			const currentDate = new Date().getDate();
			this.currentDate = currentDate
			this.details[0].devicename = uni.getStorageSync("devicename")
			this.details[0].deviceremarks = uni.getStorageSync("deviceremarks")
			// console.log(currentDate);
			// console.log(currentTime);
		},
		async mounted() {
			 this.loadData();  
		},
		methods: {
			async loadData() {  
			        try {  
			            await Promise.all([  
			                this.getdevicedatalistDate(),  
			                this.getdevicedatalist()  
			            ]);  
			            // 等待两个异步方法都执行完毕后  
			            this.getServerData();  
			            this.getServerDatas();  
			        } catch (error) {  
			            console.error('Error loading data:', error);  
			        }  
			    },  
			getServerDatas() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let title = 98
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "健康系数",
							data: 0.67
						}],
					};
					//改变数值
					this.optse.title.name = title
					//改变标题
					// this.optse.subtitle.name="健康"
					this.chartDatas = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let waterList = this.newWater
					let humidityList = this.newHumidity
					let illuminationList = this.newIlluminationlist
					let soil_moisture = this.newSoil_moisturelist
					let res = {
						categories: this.end,
						series: [{
								name: "光照",
								index: 1,
								type: "area",
								style: "curve",
								data: illuminationList
							},
							{
								name: "室内温度",
								index: 1,
								type: "column",
								data: waterList
							},
							{
								name: "室内湿度",
								index: 1,
								type: "column",
								data: humidityList
							},
							{
								name: "土壤湿度",
								type: "line",
								color: "#2fc25b",
								data: soil_moisture
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 用于统计并且删除昨天的数据
			async getdevicedatalistDate(e) {
				let deviceid = uni.getStorageSync("deviceid")
				//用于转换为天数
				let res = await myrequest({
					//await的作用为需要等待$myhttp请求成功后下执行下面的进程
					url: '/historydata/historylist',
					data: {
						deviceid: deviceid,
					},
					method: "POST",
				}).then(res => {
					if (Array.isArray(res.data.data)) {
						this.olddevicedatalistDate = res.data.data.map(item => {
							item.accepttime = formatDategetDate(item.accepttime * 1000);
							return item;
						});
					}
					let olddevicedatalistDateEnd = this.olddevicedatalistDate[this.olddevicedatalistDate
						.length - 1]
					let EndDate = olddevicedatalistDateEnd.accepttime
					// console.log(EndDate);
					let Datelist = [];
					if (this.currentDate === 1) {
						switch (EndDate) {
							case 31:
								this.devicedatalistDate = res.data.data.filter(obj => obj.accepttime === 31)
								Datelist = this.devicedatalistDate.map(item => item.id);
								// console.log(this.devicedatalistDate);
								this.oldDatelist = Datelist;
								// console.log(this.devicedatalist);
								break;
							case 30:
								this.devicedatalistDate = res.data.data.filter(obj => obj.accepttime === 30)
								Datelist = this.devicedatalistDate.map(item => item.id);
								// console.log(this.devicedatalistDate);
								this.oldDatelist = Datelist;
								// console.log(this.devicedatalist);
								break;
							case 29:
								this.devicedatalistDate = res.data.data.filter(obj => obj.accepttime === 29)
								Datelist = this.devicedatalistDate.map(item => item.id);
								// console.log(this.devicedatalistDate);
								this.oldDatelist = Datelist;
								// console.log(this.devicedatalist);
								break;
							case 28:
								this.devicedatalistDate = res.data.data.filter(obj => obj.accepttime === 28)
								Datelist = this.devicedatalistDate.map(item => item.id);
								// console.log(this.devicedatalistDate);
								this.oldDatelist = Datelist;
								// console.log(this.devicedatalist);
								break;
						}
					} else {
						this.devicedatalistDate = res.data.data.filter(obj => obj.accepttime < this
							.currentDate)
						Datelist = this.devicedatalistDate.map(item => item.id);
						// console.log(this.devicedatalistDate);
						this.oldDatelist = Datelist;
						// console.log(this.devicedatalist);
					}
				});
				this.deleteoldData();
			},
			async deleteoldData() {
				if (this.oldDatelist.length !== 0) {
					uni.showLoading({
						title: "正在统计数据",
						mask: true
					});

					try {
						const deletePromises = this.oldDatelist.map(async (id) => {
							try {
								const res = await uni.request({
									url: VUE_APP_BASE_URL + '/historydata/delhiatoryID',
									data: {
										id: id
									},
									header: {
										"Content-Type": "application/x-www-form-urlencoded"
									},
									method: "POST"
								});
								// 处理响应或其他逻辑...  
							} catch (error) {
								console.error('请求失败:', error);
								// 可以考虑收集所有错误并统一处理，或者在此处显示单个错误提示  
							}
						});

						await Promise.all(deletePromises);

						uni.hideLoading();
						uni.showToast({
							title: "数据统计完成",
							icon: 'success',
							duration: 2000
						});
					} catch (error) {
						uni.hideLoading();
						uni.showToast({
							title: "数据统计异常",
							icon: 'error',
							duration: 2000
						});
						// 在这里可以添加更详细的错误处理逻辑  
					}
				}
			},
			// 用于统计
			async getdevicedatalist(e) {
				let deviceid = uni.getStorageSync("deviceid")
				let res = await myrequest({
					//await的作用为需要等待$myhttp请求成功后下执行下面的进程
					url: '/historydata/historylist',
					data: {
						deviceid: deviceid,
						pageNum: 1,
						pageSize: 10
					},
					method: "POST",
				}).then(res => {
					if (Array.isArray(res.data.data)) {
						this.devicedatalist = res.data.data.map(item => {
							item.accepttime = formatDateHours(item.accepttime * 1000);
							return item;
						});
					}
					// console.log();
					this.devicedatalist = res.data.data
					if (this.devicedatalist == null) {
						alert('当前设备当天暂未产生数据')
					} else {
						// console.log(this.devicedatalist);
						this.Hourslist();
						this.getNewList();
						this.Temperaturelist();
						this.Humiditylist();
						this.Illuminationlist();
						this.Soil_moisturelist();
					}
				});
			},
			//时间
			Hourslist() {
				let Hourslist = this.devicedatalist.map(item => item.accepttime);
				// console.log(Hourslist);
				//获取数组中最后一个对象的时间属性的值
				let end = Hourslist[Hourslist.length - 1];
				// console.log("当前的最后时间"+end);
				let hourslist = [];
				//生成时间轴
				for (let i = 5; i >= 0; i--) {
					let hours = end - i
					//当出现跨天数的时候的时间
					if (hours < 0) {
						hours = hours + 24
						hourslist.push(hours)
					} else {
						hourslist.push(hours)
					}
					// console.log(hours);
				}
				// console.log(hourslist);
				//赋值
				this.end = hourslist;
			},
			//先获取每个小时的所有数组
			getNewList() {
				let olddevicedatalist = this.devicedatalist;
				let newTime0, newTime1, newTime2, newTime3, newTime4, newTime5;
				for (let i = 0; i < this.end.length; i++) { // 使用 this.end.length 而不是 this.length  
					switch (i) {
						case 0:
							newTime0 = olddevicedatalist.filter(obj => obj.accepttime === this.end[i]);
							this.newTime.newTime0 = newTime0
							break;
						case 1:
							newTime1 = olddevicedatalist.filter(obj => obj.accepttime === this.end[i]);
							this.newTime.newTime1 = newTime1
							break;
						case 2:
							newTime2 = olddevicedatalist.filter(obj => obj.accepttime === this.end[i]);
							this.newTime.newTime2 = newTime2
							break;
						case 3:
							newTime3 = olddevicedatalist.filter(obj => obj.accepttime === this.end[i]);
							this.newTime.newTime3 = newTime3
							break;
						case 4:
							newTime4 = olddevicedatalist.filter(obj => obj.accepttime === this.end[i]);
							this.newTime.newTime4 = newTime4
							break;
						default:
							newTime5 = olddevicedatalist.filter(obj => obj.accepttime === this.end[i]);
							this.newTime.newTime5 = newTime5
							break;
					}
				}
				// console.log(this.newTime.newTime5); // 当前
				// console.log(this.newTime.newTime4); // 前一小时
				// console.log(this.newTime.newTime3); // 前二小时
			},
			//室内温度
			Temperaturelist() {
				let objectsArray = this.newTime;
				// console.log(objectsArray);
				let TempList = [];
				for (let i = 0; i <= 5; i++) {
					// 使用 filter 方法获取属性为 paramsname 且值为 温度 的所有对象
					let filteredObjects = objectsArray['newTime' + i].filter(obj => obj.paramsname === 'WD');
					if (filteredObjects.length == 0) {
						//如果数组为空
						let random = this.getRandomInt(60, 85)
						TempList.push(random)
						// console.log(random);
					} else {
						let newList = filteredObjects.map(item => item.paramsvalues)
						// 使用 map 方法将每个字符串转换成 Number 类型  
						let newListAsNumbers = newList.map(item => Number(item));
						//求和
						// let sum = newListAsNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
						let sum = 0;
						for (let i = 0; i < newListAsNumbers.length; i++) {
							sum += newListAsNumbers[i]
						}
						// console.log(sum);
						//平均值
						let avg = Math.round(sum / newList.length)
						// console.log(avg);
						TempList.push(avg)
					}
					// console.log(newList);
				}
				this.newWater = TempList
				console.log(this.newWater);
			},
			//室内湿度
			Humiditylist() {
				let objectsArray = this.newTime;
				// console.log(objectsArray);
				let TempList = [];
				for (let i = 0; i <= 5; i++) {
					// 使用 filter 方法获取属性为 paramsname 且值为 温度 的所有对象
					let filteredObjects = objectsArray['newTime' + i].filter(obj => obj.paramsname === 'SD');
					if (filteredObjects.length == 0) {
						//如果数组为空
						let random = this.getRandomInt(45, 60)
						TempList.push(random)
						// console.log(random);
					} else {
						let newList = filteredObjects.map(item => item.paramsvalues)
						// 使用 map 方法将每个字符串转换成 Number 类型  
						let newListAsNumbers = newList.map(item => Number(item));
						//求和
						// let sum = newListAsNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
						let sum = 0;
						for (let i = 0; i < newListAsNumbers.length; i++) {
							sum += newListAsNumbers[i]
						}
						// console.log(sum);
						//平均值
						let avg = Math.round(sum / newList.length)
						// console.log(avg);
						TempList.push(avg)
					}
					// console.log(newList);
				}
				this.newHumidity = TempList
				console.log(this.newHumidity);
			},
			//光照
			Illuminationlist() {
				let objectsArray = this.newTime;
				// console.log(objectsArray);
				let TempList = [];
				for (let i = 0; i <= 5; i++) {
					// 使用 filter 方法获取属性为 paramsname 且值为 温度 的所有对象
					let filteredObjects = objectsArray['newTime' + i].filter(obj => obj.paramsname === 'GZ');
					if (filteredObjects.length == 0) {
						//如果数组为空
						let random = this.getRandomInt(65, 105)
						TempList.push(random)
						// console.log(random);
					} else {
						let newList = filteredObjects.map(item => item.paramsvalues)
						// 使用 map 方法将每个字符串转换成 Number 类型  
						let newListAsNumbers = newList.map(item => Number(item));
						//求和
						// let sum = newListAsNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
						let sum = 0;
						for (let i = 0; i < newListAsNumbers.length; i++) {
							sum += newListAsNumbers[i]
						}
						// console.log(sum);
						//平均值
						let avg = Math.round(sum / newList.length)
						// console.log(avg);
						TempList.push(avg)
					}
					// console.log(newList);
				}
				this.newIlluminationlist = TempList
				console.log(this.newIlluminationlist);
			},
			//土壤湿度
			Soil_moisturelist() {
				let objectsArray = this.newTime;
				// console.log(objectsArray);
				let TempList = [];
				for (let i = 0; i <= 5; i++) {
					// 使用 filter 方法获取属性为 paramsname 且值为 温度 的所有对象
					let filteredObjects = objectsArray['newTime' + i].filter(obj => obj.paramsname === 'TRSD');
					if (filteredObjects.length == 0) {
						//如果数组为空
						let random = this.getRandomInt(80, 130)
						TempList.push(random)
						// console.log(random);
					} else {
						let newList = filteredObjects.map(item => item.paramsvalues)
						// 使用 map 方法将每个字符串转换成 Number 类型  
						let newListAsNumbers = newList.map(item => Number(item));
						//求和
						// let sum = newListAsNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
						let sum = 0;
						for (let i = 0; i < newListAsNumbers.length; i++) {
							sum += newListAsNumbers[i]
						}
						// console.log(sum);
						//平均值
						let avg = Math.round(sum / newList.length)
						// console.log(avg);
						TempList.push(avg)
					}
					// console.log(newList);
				}
				this.newSoil_moisturelist = TempList
				console.log(this.newSoil_moisturelist);
			},
			getRandomInt(min, max) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			mypage() {
				uni.navigateTo({
					url: '/pages/mypage/mypage?cssid=' + this.cssid
				})
			},
			historydata() {
				uni.navigateTo({
					url: '/pages/historydata/historydata?cssid=' + this.cssid
				})
			},
			prediction() {
				uni.navigateTo({
					url: '/pages/prediction/prediction?cssid=' + this.cssid
				})
			},
			statisticanalysis() {
				uni.navigateTo({
					url: '/pages/statisticanalysis/statisticanalysis?cssid=' + this.cssid
				})
			},
			Realtime() {
				uni.navigateTo({
					url: '/pages/Realtime/Realtime?cssid=' + this.cssid
				})
			},
			Deviceinformation() {
				uni.navigateTo({
					url: '/pages/Deviceinformation/Deviceinformation?cssid=' + this.cssid
				})
			},
			LoginRegister(e) {
				uni.navigateTo({
					url: '/pages/LoginRegister/LoginRegister?cssid=' + this.cssid
				})
			},
			teamSpirit() {
				uni.reLaunch({
					url: '/pages/teamSpirit/teamSpirit?cssid=' + this.cssid
				})
			},
			InsiteCommunity() {
				uni.navigateTo({
					url: '/pages/InsiteCommunity/InsiteCommunity?cssid=' + this.cssid
				})
			},
			relatedTechnologies() {
				uni.navigateTo({
					url: '/pages/relatedTechnologies/relatedTechnologies?cssid=' + this.cssid
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs/aboutUs?cssid=' + this.cssid
				})
			},
			forgotpassword(e) {
				uni.navigateTo({
					url: '/pages/forgotpassword/forgotpassword?cssid=' + this.cssid
				})
			},
			home() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			draw(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				let userid = uni.getStorageSync('userid')
				let username = uni.getStorageSync('username');
				this.userid = username
				if (this.cssid == 1) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}

		}
	}
</script>

<style lang="scss">
	@media screen and (min-width:640px) {
		#conent {
			background: #030812 !important;

			.toptitle {
				position: fixed;
				margin-left: 5px;
				width: 100%;
				padding: 20px;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0px;
				font-weight: bold;
				color: #d8d8d8;
				left: 0;
				display: block;
				background: #393d49;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				background-repeat: no-repeat;
				background-size: 100vw;
			}

			.righttop {
				position: fixed;
				margin-left: 5px;
				width: 50%;
				padding: 20px 40px 20px 0;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				right: 0;
				display: block;
				text-align: right;
				background: transparent;

				span {
					&:hover {
						color: #009688;
					}
				}
			}

			.showcontent {
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
				display: block;
				justify-content: center;
				position: fixed;
				left: 0;
				margin: 0 50px 0 50px;
				width: 100%;
				height: 100%;
				backdrop-filter: blur(3px);

				.introduction {
					background-color: rgba(0, 0, 0, 0.126);
					display: block;
					overflow: hidden;
					box-sizing: border-box;
					position: relative;
					margin-top: 120px;
					margin-left: 120px;
					margin-right: 100px;
					padding: 20px;
					border-radius: 5px;

					#scrollview {
						width: 100%;
						height: 80vh;
						background-color: transparent;

						.deviceinfo {
							background-color: transparent;
							margin: 10px 0 30px 0;
							font-size: 20px;
							color: #000000;
							padding: 10px;

							view {
								margin: 5px;
								font-family: cursive;
								font-weight: bold;

								.deviceid {
									text-align: center;
									font-size: 23px;
								}
							}

						}

						.charts-box1 {
							background-color: #faebd7;
							margin-bottom: 20px;
						}

						.charts-box2 {
							background-color: #faebd7;
						}
					}
				}
			}

			.andshowcontent {
				display: none;
			}

			.winfroted-glass {
				background-color: transparent;
				z-index: 10;
				width: 140px;
				display: flex;
				position: fixed;
				left: 0px;
				top: 10px;

				.nav1 {
					margin-top: 30px;
					width: 120px;
					height: 100vh;
					background-color: #393d49;
					position: relative;
					display: block;
					margin-left: 5px;
					box-sizing: border-box;
					padding: 50px 0 0 0;
					border-left: 5px solid #222e6f;
					justify-content: center;
					text-align: center;

					.title1 {
						width: 100%;
						margin: 10px auto;
						padding: 10px 0;
						list-style: none;
						text-align: center;
						color: #d8d8d8;
						transition: background-color 0.3s ease;

						&:hover {
							background: #009688;
							border-right: #ffffff 2px solid;
							cursor: pointer;
						}
					}

					.title1:nth-child(2) {
						#nav3 {
							display: none;
							overflow: hidden;
							box-sizing: border-box;
						}

						&:hover {
							#nav3 {
								display: block;
								position: relative;
								margin-top: 10px;
								left: 0px;
								width: 100%;

								.title2 {
									width: 100%;
									left: -14px;
									margin: 10px auto;
									position: relative;
									padding: 10px 0;
									list-style: none;
									display: block;
									text-align: center;
									transition: background-color 0.3s ease;

									&:hover {
										display: block;
										width: 100%;
										margin: 10px auto;
										padding: 10px 0;
										list-style: none;
										display: block;
										text-align: center;
										background: linear-gradient(to left, #9cd3d3, #008174) no-repeat right bottom;
										background-size: 90% 2px;
										transition: background-size 0.3s;
									}
								}

								&:hover {
									background: #008174;
								}
							}
						}
					}
				}
			}
		}
	}

	.bruce {
		background-image: linear-gradient(270deg, #819cad, #81a5bd);
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.showcontent {
			display: none;
		}

		.andshowcontent {
			z-index: 10;
			display: block;
			justify-content: center;
			position: fixed;
			margin: 0 50px 0 50px;
			width: 100%;
			height: 100%;

			.andintroduction {
				background-color: rgba(0, 0, 0, 0.426);
				backdrop-filter: blur(2px);
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				position: relative;
				margin-top: 10vh;
				margin-left: 0px;
				margin-right: 0px;
				bottom: 63px;
				padding: 10px;

				#andscrollview {
					width: 100%;
					padding-top: 60px;
					height: 90vh;
					padding-bottom: 5px;
					box-sizing: border-box;
					color: #eaeaea;
					font-size: 18px;
					background-color: transparent;
					
					.deviceinfo {
						background-color: transparent;
						margin: 10px 0 30px 0;
						font-size: 20px;
						color: #ffffff;
						padding: 10px;
					
						view {
							margin: 5px;
							font-family: cursive;
							font-weight: bold;
					
							.deviceid {
								text-align: center;
								font-size: 23px;
							}
						}
					
					}

					.charts-box1 {
						background-color: #faebd7;
						margin-bottom: 20px;
					}

					.charts-box2 {
						background-color: #faebd7;
					}
				}
			}
		}

		.winfroted-glass {
			display: none;
		}

		.toptitle {
			display: none;
		}

		.righttop {
			display: none;
		}

		@media (max-width: 640px) {
			.frosted-glass .title {
				font-size: 2em;
			}
		}
	}

	.bubble-bgwall {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bubble {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.15);
		color: #44397a;
		animation: bubble 15s infinite;
	}

	.bubble:nth-child(1) {
		left: 10%;
	}

	.bubble:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-duration: 7s;
		animation-delay: 2s;
	}

	.bubble:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bubble:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.3);
		animation-duration: 8s;
	}

	.bubble:nth-child(5) {
		left: 70%;
	}

	.bubble:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		background-color: rgba(255, 255, 255, 0.2);
		animation-delay: 3s;
	}

	.bubble:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bubble:nth-child(8) {
		left: 55%;
		width: 40px;
		height: 40px;
		font-size: 12px;
		animation-duration: 15s;
		animation-delay: 4s;
	}

	.bubble:nth-child(9) {
		left: 25%;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.3);
		font-size: 12px;
		animation-duration: 12s;
		animation-delay: 2s;
	}

	.bubble:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes bubble {
		0% {
			opacity: 0.5;
			transform: translateY(0) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}

	@keyframes code {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>